<%-- 
    Document   : audio_manager
    Created on : Mar 31, 2012, 3:18:49 AM
    Author     : 0905
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<c:if test="${empty pass}">
    <c:redirect url="audio_manager"></c:redirect>
</c:if>

<!DOCTYPE html>
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>FOOBAR</title>
		<link rel="shortcut icon" href="rsrc/images/book-icon.ico" />
        <style type="text/css">
            @import url(rsrc/css/sched_table.css);
            @import url(rsrc/css/common.css);
            @import url(rsrc/css/login.css);
            @import url(rsrc/css/register.css);
            @import url(rsrc/css/validationEngine.jquery.css);
            
        </style>       
       <script type="text/javascript" src = "rsrc/js/jquery-latest.js"></script>     
       <script>
            $(document).ready(function(){
                
                $('#editAudio').attr('disabled', 'disabled');
                $('#delAudio').attr('disabled', 'disabled');
                $('input[name="audio"]').click(function(){
                    $('#editAudio').removeAttr('disabled', 'disabled');
                    $('#delAudio').removeAttr('disabled', 'disabled');
                });
                
                $('#addAudio').click(function(){
                    $('#audio_form_div').html(''); 
                    $('#audio_form_div').load('audio_form',{formType : "add"},function(){
                        $('#cancelAudioForm').click(function(){
                           $('#audio_form_div').html(''); 
                        });
                    });
                });
                $('#editAudio').click(function(){
                     var choice = $('input[name="audio"]:checked').val();
                     $('#audio_form_div').html(''); 
                     $('#audio_form_div').load('audio_form',{formType : "edit", audioSelected : choice},function(){
                        $('#cancelAudioForm').click(function(){
                           $('#audio_form_div').html(''); 
                        });
                    });
                });
              
            });
       </script>
      

    </head>
    <body>
        <div class="main-container">
            <div id="top">
                <div><img src="rsrc/images/LOGO.png" height="50" /></div>
                <div>
                    <ul id="navigation" class='hd'>
                        <li><a href="audio_manager"><span>Manage Audio</span></a></li>
                        <li><a href="logout"><span>Log Out</span></a></li>
                    </ul>
                </div>
            </div>
            <div>
                <p>
                    <span class="page-title"></span>
                </p>
                <div class="title-separator"></div>
                <div class="clearfix">
                    <div class="right" id = 'loginDiv'>
                        <span class="page-label">Manage Audio</span>
			<div class="separator"></div>
			<div id="audio_manager">
                            <form id="deleteAudio" action="add_audio_action" method="post">
                            <table class="enrollment_sched">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Title</th>
                                        <th>Length</th>
                                        <th>Recording Artist</th>
                                        <th>Genre</th>
                                        <th>Price</th>
                                    </tr>
                                </thead>
                                <tbody>                                   
                                    <c:forEach var="audio" items="${audioList}" >
                                       <tr>
                                            <td>
                                                <input type="radio" name="audio" id="audio" value="${audio.productCrypt}">
                                            </td>
                                            <td>${audio.title}</td>
                                            <td>${audio.length}</td>
                                            <td>${audio.recordingArtist}</td>
                                            <td>${audio.genre}</td>
                                            <td>P ${audio.price}</td>                                           
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                            <br/>
                             <input type="hidden" name="form" id="form" value="$#!@e"/>
                            <input type="button" class="gb" id ="addAudio" name="addAudio" value="Add Audio"/> 
                            <input type="button" class="gb" id ="editAudio" name="editAudio" value="Edit Audio"/>
                            <input type="submit" class="gb" id ="delAudio" name="delAudio" value="Delete Audio"/>
                            </form>
                        </div>
                        <br/>
                        <c:if test="${!empty confirmMsg}">
                            <span class="label">${confirmMsg}</span>
                        </c:if>
                        <div id="audio_form_div"></div>
                    </div>
                    <div id="left">
                        <div style="height:20px"></div>
                        <div class="left-main-control" style="border-right: 1px solid #fff;">                         
                            Manage Audio        
                        </div>
                        <div style="height:20px"></div>
                        <a href="audio_manager_cp">
			<div class="left-main-control">
                            Change Password
			</div>
			</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
